<template>
  <div class="role-switch">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <img class="h-8 w-auto" src="/logo.png" alt="学生健康上报系统" />
              <span class="ml-2 text-xl font-bold text-gray-800">学生健康上报系统</span>
            </div>
          </div>
          <div class="flex items-center">
            <div class="ml-3 relative">
              <div class="flex items-center space-x-4">
                <Bell class="h-5 w-5 text-gray-500" />
                <div class="flex items-center">
                  <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="" />
                  <span class="ml-2 text-sm font-medium text-gray-700">张院长</span>
                  <ChevronDown class="ml-1 h-4 w-4 text-gray-500" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="flex">
      <!-- 侧边栏 -->
      <aside class="w-64 bg-gray-800 min-h-screen">
        <nav class="mt-5 px-2">
          <div class="space-y-1">
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <LayoutDashboard class="mr-3 h-5 w-5" />
              数据看板
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Users class="mr-3 h-5 w-5" />
              班级管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <ClipboardList class="mr-3 h-5 w-5" />
              上报记录
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <AlertTriangle class="mr-3 h-5 w-5" />
              异常管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <FileText class="mr-3 h-5 w-5" />
              统计报表
            </a>
            <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <UserCog class="mr-3 h-5 w-5" />
              角色切换
            </a>
          </div>
        </nav>
      </aside>

      <!-- 主内容区 -->
      <main class="flex-1 bg-gray-100 p-6">
        <div class="max-w-7xl mx-auto">
          <!-- 页面标题 -->
          <div class="mb-6">
            <h1 class="text-2xl font-semibold text-gray-900">角色切换</h1>
            <p class="mt-1 text-sm text-gray-500">切换到不同的角色查看不同的功能</p>
          </div>

          <!-- 角色卡片 -->
          <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <!-- 学院管理员角色 -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="p-5">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                    <Building2 class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">学院管理员</dt>
                      <dd>
                        <div class="text-lg font-medium text-gray-900">当前角色</div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                  <span class="font-medium text-gray-500">管理学院内的班级、辅导员和学生</span>
                </div>
              </div>
            </div>

            <!-- 辅导员角色 -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="p-5">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                    <UserCheck class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">辅导员</dt>
                      <dd>
                        <div class="text-lg font-medium text-gray-900">可切换</div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                  <button 
                    @click="switchRole('counselor')"
                    class="font-medium text-blue-600 hover:text-blue-500"
                  >
                    切换到此角色 <ArrowRight class="inline-block h-4 w-4" />
                  </button>
                </div>
              </div>
            </div>

            <!-- 学生角色 -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="p-5">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
                    <GraduationCap class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">学生</dt>
                      <dd>
                        <div class="text-lg font-medium text-gray-900">可切换</div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                  <button 
                    @click="switchRole('student')"
                    class="font-medium text-blue-600 hover:text-blue-500"
                  >
                    切换到此角色 <ArrowRight class="inline-block h-4 w-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 角色权限说明 -->
          <div class="mt-8 bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6">
              <h3 class="text-lg leading-6 font-medium text-gray-900">角色权限说明</h3>
              <p class="mt-1 max-w-2xl text-sm text-gray-500">各角色可访问的功能和权限</p>
            </div>
            <div class="border-t border-gray-200">
              <dl>
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                  <dt class="text-sm font-medium text-gray-500">学院管理员</dt>
                  <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    <ul class="list-disc pl-5 space-y-1">
                      <li>查看学院数据看板</li>
                      <li>管理班级信息</li>
                      <li>查看所有上报记录</li>
                      <li>处理异常情况</li>
                      <li>生成统计报表</li>
                      <li>管理辅导员账号</li>
                    </ul>
                  </dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                  <dt class="text-sm font-medium text-gray-500">辅导员</dt>
                  <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    <ul class="list-disc pl-5 space-y-1">
                      <li>查看班级数据看板</li>
                      <li>管理学生信息</li>
                      <li>查看班级上报记录</li>
                      <li>处理班级异常情况</li>
                      <li>查看班级统计数据</li>
                    </ul>
                  </dd>
                </div>
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                  <dt class="text-sm font-medium text-gray-500">学生</dt>
                  <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    <ul class="list-disc pl-5 space-y-1">
                      <li>提交健康上报</li>
                      <li>查看个人上报记录</li>
                      <li>修改个人信息</li>
                      <li>接收上报提醒</li>
                    </ul>
                  </dd>
                </div>
              </dl>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Bell, ChevronDown, LayoutDashboard, Users, ClipboardList, AlertTriangle, FileText, UserCog, Building2, UserCheck, GraduationCap, ArrowRight } from 'lucide-vue-next'

export default {
  components: {
    Bell, ChevronDown, LayoutDashboard, Users, ClipboardList, AlertTriangle, FileText, UserCog, Building2, UserCheck, GraduationCap, ArrowRight
  },
  setup() {
    const router = useRouter()
    
    const switchRole = (role) => {
      // 这里应该有切换角色的逻辑，比如修改用户状态、重定向等
      console.log('切换到角色:', role)
      
      // 根据角色重定向到对应的首页
      if (role === 'counselor') {
        router.push('/counselor/dashboard')
      } else if (role === 'student') {
        router.push('/student/report')
      }
    }
    
    return {
      switchRole
    }
  }
}
</script>